<template>
  <div class="information-monitor tag-scrollbar">
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #qualityStatus="{ scope }">
        <el-tag :type="qualityClass(scope.row.qualityStatus)">
          <icon-svg :name="qualityIcon(scope.row.qualityStatus)"></icon-svg>
          {{ showQuality(scope.row.qualityStatus) }}
        </el-tag>
      </template>
    </tag-table>
  </div>
</template>

<script>
import monitor from '@/views/modules/monitor/monitor.js'
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '质量大类',
          prop: 'qualityCategory',
          align: 'center'
        },
        {
          show: true,
          label: '质量小类',
          prop: 'qualitySubCategory',
          align: 'center'
        },
        {
          show: true,
          label: '质量状态',
          prop: 'qualityStatus',
          align: 'center'
        },
        {
          show: true,
          label: '预警缘由',
          prop: 'reasonWarning',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  watch: {
    tagId(val) {
      if (val) this.getList()
    }
  },
  methods: {
    getDetail() {
      this.getList()
    },
    getList() {
      this.loading = true
      this.params.queryParams.tagId = this.tagId
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagExceptionWarning/selectTagExceptionWarningPage'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    showQuality(status) {
      return monitor.showQuality(status)
    },
    qualityClass(status) {
      return monitor.showClass(status)
    },
    qualityIcon(status) {
      return monitor.showIcon(status)
    }
  }
}
</script>

<style lang="scss">
.information-monitor {
  height: 100%;
  margin: 0 20px;
  padding-bottom: 20px;
  overflow-y: auto;
  .tag-table {
    .cell {
      line-height: 30px;
    }
    .header-cell-class {
      border-right: none;
      background-color: #606ac3;
    }
    .el-table--border td {
      border-right: none;
      padding-left: 20px;
      padding-right: 20px;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      position: relative;
      background-color: #dbebfa;
      &:after {
        height: 2px;
        content: '';
        background-color: #606ac3;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }
  }
}
</style>
